<template>
  <div class="container">
    <el-form
      :inline="true"
      :model="pageParam"
      style="text-align: center"
      class="demo-form-inline"
    >
      <el-form-item label="姓名查询">
        <el-input v-model="pageParam.name" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="职位查询">
        <el-select v-model="pageParam.level" placeholder="老师职位">
          <el-option label="默认全选" :value="null"></el-option>
          <el-option label="高级讲师" :value="1"></el-option>
          <el-option label="首席讲师" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间查询">
        <el-col :span="11">
          <el-date-picker
            placeholder="选择开始时间"
            v-model="pageParam.begin"
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">--</el-col>
        <el-col :span="11">
          <el-date-picker
            type="date"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            placeholder="选择具体时间段"
            style="width: 100%"
            v-model="pageParam.end"
          ></el-date-picker>
        </el-col>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-share" @click="getTeacherList()"
          >查询</el-button
        >
        <el-button type="primary" icon="el-icon-delete" @click="resetData()"
          >清空</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="list.rows" border style="width: 100%">
      <el-table-column type="index" label="id编号" width="180">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="180"> </el-table-column>
      <el-table-column label="头衔" width="180">
        <template slot-scope="scope">
          {{ scope.row.level === 1 ? "高级讲师" : "首席讲师" }}
        </template>
      </el-table-column>
      <el-table-column prop="career" label="职称" width="180"></el-table-column>
      <el-table-column prop="intro" label="介绍" width="250"> </el-table-column>
      <el-table-column prop="sort" sortable label="权重" width="100">
      </el-table-column>
      <el-table-column prop="gmtCreate" label="添加时间" width="180">
      </el-table-column>
      <el-table-column prop="gmtModified" label="修改时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="220">
        <template slot-scope="scope">
          <router-link :to="'/teacher/edit/' + scope.row.id">
            <el-button icon="el-icon-edit" type="primary" plain>修改</el-button>
          </router-link>
          <el-button
            icon="el-icon-delete"
            type="danger"
            plain
            @click="removeById(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :page-size="list.pageSize"
      :pager-count="list.current"
      :total="list.total"
      background
      style="padding: 30px 0; text-align: center"
      layout="total ,prev, pager, next ,jumper"
      @current-change="getTeacherList"
    >
    </el-pagination>
  </div>
</template> 

<script>
import teacher from "@/api/edu/teacher";

export default {
  name: "TeacherList",
  data() {
    return {
      list: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        rows: [],
      },
      pageParam: {
        page: "1",
        pageSize: "10",
        name: null,
        level: null,
        begin: null,
        end: null,
      },
    };
  },
  created() {
    this.getTeacherList();
  },
  methods: {
    //删除用户
    removeById(id) {
      this.$confirm("此操作将永久该行教师信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //删除操作
        teacher.removeById(id).then((response) => {
          // console.log(response.data);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.getTeacherList();
        });
      });
    },

    // 重置表单
    resetData() {
      this.pageParam.name = null;
      this.pageParam.level = null;
      this.pageParam.begin = null;
      this.pageParam.end = null;
      this.getTeacherList();
    },

    // 条件查询
    getTeacherList(page = 1) {
      this.pageParam.page = page;
      teacher.getTeacherListPage(this.pageParam).then((response) => {
        //reponse返回的数据
        // console.log(response);
        this.list.total = response.data.total;
        this.list.rows = response.data.rows;
        this.list.pageSize = response.data.pageSize;
        this.list.currentPage = response.data.currentPage;
        // console.log(this.list);
      });
    },
  },
};
</script>

<style >
</style>